<template>
  <div class="u-home-article-tit">
    <span class="line" :style="{'background': `#${color}`}"></span>
    <p class="tit" :style="{color: `#${color}`}">
      {{title}}
    </p>
    <span class="line" :style="{'background': `#${color}`}"></span>
  </div>
</template>

<script>
  export default {
    props: {
      color: [String],
      title: [String],
      isIcon: {
        type: Boolean,
        default: true
      }
    }
  }
</script>

<style lang="scss">
  .u-home-article-tit {
    padding: .3rem 0;
    font-size: .27rem;
    text-align: center;
    .line {
      display: inline-block;
      width: .8rem;
      height: 1px;
      vertical-align: middle;
      background-color: #323232;
    }
    .tit {
      display: inline-block;
      padding: 0 .2rem;
      vertical-align: middle;
      font-weight: bold;
      i {
        display: inline-block;
        width: .2rem;
        height: .2rem;
        margin-right: 2px;
        background-size: cover;
      }
    }
  }
</style>
